<template>
	<view class="bidding">
		<view class="header">
			<view class="searchBox marginTop10 disFlex">
				<view class="left" @tap="getnav(router(`searchBidding`))">
					<image src="../../../static/img/each.png" mode=""></image>
					<input type="text" value="" placeholder="输入关键词搜索会展方案" />
				</view>
				<view class="right" @tap="getnav(router(`factory`))">
					<view>我要发标</view>
				</view>
			</view>
			<view class="type disFlex">
				<view class="ts" v-for="(val,index) in typeList" :key="index" @tap="showPop(val,index)">
					<view :class="index == activeIndex?'activeColor':''">{{val}}</view>
					<image class="xjt" :src="index == activeIndex?'../../../static/img/sjt.png':'../../../static/img/xjt.png'" mode=""></image>
				</view>
			</view>
		</view>
		<view class=" box10" v-for="(v,i) in info" @tap="tobiddingDetail(v.id)">
			<view class="list">
				<view class="userInfo">
					<image :src="v.user.headimgurl" mode="" class="userLogo"></image>
					<view class="right disFlex">
						<view class="line1 disFlex one">
							<view>
								<text class="name">{{v.user.nickname}}</text>
								<text class="addr">{{v.city.shortname}}</text>
							</view>
							<view class="lable">{{v.industry.name}}</view>
						</view>
						<view class="infos">
							<view>{{v.create_time}}</view>
							<view style="padding: 0 20rpx;">展位{{v.acreage}}m²</view>
							<view>预算{{v.cost}}元</view>
						</view>
					</view>
				</view>
				<view class="content ">
					<view class="word line3">{{v.content}}</view>
					<view class="allWord">全文</view>
				</view>
				<view class="imgs">
					<image v-for="(item,i) in v.img" :src="item" mode=""></image>
				</view>
				<view class="timeBox disFlex">
					<view class="time">招标截至时间：{{v.deadline}}</view>
					<button>立即投标</button>
				</view>
			</view>
		</view>
		<!-- 区域 -->
		<view class="selectPop" v-show="selectcity">
			<view class="pop">
				<view class="selectList">
					<view   :class="-1 == activecity?'active':''" @tap="selcity('',-1)">全部</view>
					<view  :class="i == activecity?'active':''" @tap="selcity(v,i)" v-for="(v,i) in city" :key='i'>{{v.shortname}}</view>
				</view>
				<view class="disFlex clearBox">
					<view class="clear" @tap="close">清空</view>
					<view class="sure" @tap="closePop">确定</view>
				</view>
			</view>
		</view>
		<!-- 展台类型 -->
		<view class="selectPop" v-show="selecttype">
			<view class="pop">
				<view class="selectList">
					<view   :class="-1 == activetype?'active':''" @tap="seltype('',-1)">全部</view>
					<view  :class="i == activetype?'active':''" @tap="seltype(v,i)" v-for="(v,i) in type" :key='i'>{{v.name}}</view>
				</view>
				<view class="disFlex clearBox">
					<view class="clear" @tap="close">清空</view>
					<view class="sure" @tap="closePop">确定</view>
				</view>
			</view>
		</view>
		<!-- 开口方向 -->
		<view class="selectPop" v-show="selectopen">
			<view class="pop">
				<view class="selectList">
					<view  :class="-1 == activeopen?'active':''" @tap="selopen('',-1)">全部</view>
					<view  :class="i == activeopen?'active':''" @tap="selopen(v,i)" v-for="(v,i) in open" :key='i'>{{v.name}}</view>
				</view>
				<view class="disFlex clearBox">
					<view class="clear" @tap="close">清空</view>
					<view class="sure" @tap="closePop">确定</view>
				</view>
			</view>
		</view>
		<!-- 面积 -->
		<view class="selectPop" v-show="selectmj">
			<view class="pop">
				<view class="selectList">
					<view  :class="i == activemj?'active':''" @tap="selmj(v,i)" v-for="(v,i) in mj" :key='i'>{{v}}m²</view>
				</view>
				<view class="getmeter disFlex">
					<input type="text" placeholder="输入长" v-model="mjw" @input="mjws">
					<view class="and">x</view>
					<input type="text" value="" placeholder="输入宽"  v-model="mjh" @input="mjhs"/>
				</view>
				<view class="disFlex clearBox">
					<view class="clear" @tap="close">清空</view>
					<view class="sure" @tap="closePop">确定</view>
				</view>
			</view>
		</view>
		<!-- 行业-->
		<view class="selectPop" v-show="selecthy">
			<view class="pop">
				<view class="selectList">
					<view   :class="-1 == activehy?'active':''" @tap="selhy('',-1)">全部</view>
					<view  :class="i == activehy?'active':''" @tap="selhy(v,i)" v-for="(v,i) in hy" :key='i'>{{v.name}}</view>
				</view>
				<view class="disFlex clearBox">
					<view class="clear" @tap="close">清空</view>
					<view class="sure" @tap="closePop">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				typeList: ['区域', '展台类型', '开口方向', '面积', '行业'],
				activeIndex: -1,
				activecity:-1,
				activetype:-1,
				activeopen:-1,
				activemj:0,
				activehy:-1,
				selectcity: false,
				selecttype: false,
				selectopen: false,
				selectmj: false,
				selecthy: false,
				city:[],
				type:[],
				open:[{id:1,name:'一面开口'},{id:2,name:'二面开口'},{id:3,name:'三面开口'},{id:4,name:'四面开口'}],
				mj:['18-36','36-54','54-72','72-180'],
				hy:[],
				mjw:'',
				mjh:'',
				updata:{
					city:'',
					type:'',
					open_type:'',
					acreage:'',
					industry:'',
				},
				info:[],
			}
		},
		onLoad() {
			this.getinfo()
			this.getcity()
			this.getindustry()
			this.getopen()
		},
		methods: {
			closePop() {
				this.selectcity = false
				this.selecttype = false
				this.selectopen = false
				this.selectmj = false
				this.selecthy = false
				this.activeIndex = -1
				this.getinfo()
			},
			close(){
				this.http('/api/tender/index', 'post', {}, )
					.then((res) => {
						this.info = res.data.data
						this.activecity=-1
						this.activetype=-1
						this.activeopen=-1
						this.activemj=0
						this.activehy=-1
						this.selectcity = false
						this.selecttype = false
						this.selectopen = false
						this.selectmj = false
						this.selecthy = false
						this.activeIndex = -1
						this.mjw=''
						this.mjh=''
						this.updata={}
					})
			},
			showPop(val, index) {
				if (this.activeIndex == index) {
					return
				}
				this.activeIndex = index;
				// this.selectPop = true;
				switch (val) {
					case '区域':
						this.selectcity = true;
						this.selecttype=false
						this.selectopen=false
						this.selectmj=false
						this.selecthy=false
						break;
					case '展台类型':
						this.selecttype = true;
						this.selectcity = false
						this.selectopen = false
						this.selectmj = false
						this.selecthy = false
						break;
					case '开口方向':
						this.selectopen = true;
						this.selectcity = false
						this.selecttype = false
						this.selectmj = false
						this.selecthy = false
						break;
					case '面积':
						this.selectmj = true;
						this.selectcity = false
						this.selecttype = false
						this.selectopen = false
						this.selecthy = false
						break;
					case '行业':
						this.selecthy = true;
						this.selectcity = false
						this.selecttype = false
						this.selectopen = false
						this.selectmj = false
						break;
				}
			},
			getcity(){
				this.http('/api/tender/city', 'post', {}, )
					.then((res) => {
						this.city = res.data
					})
			},
			getindustry(){
				this.http('/api/industry/index', 'post', {}, )
					.then((res) => {
						this.hy=res.data
					})
			},
			getopen(){
				this.http('/api/project/boothType', 'post', {}, )
					.then((res) => {
						this.type=res.data
					})
			},
			selcity(v,i){
				if (this.activecity == i) {
					return
				}
				this.activecity = i;
				if(this.activecity>-1){
					this.updata.city=v.id
				}else{
					this.updata.city=''
				}
			},
			seltype(v,i){
				if (this.activetype == i) {
					return
				}
				this.activetype = i;
				if(this.activetype>-1){
					this.updata.type=v.id
				}else{
					this.updata.type=''
				}
			},
			selopen(v,i){
				if (this.activeopen == i) {
					return
				}
				this.activeopen = i;
				if(this.activeopen>-1){
					this.updata.open_type=v.id
				}else{
					this.updata.open_type=''
				}
			},
			selmj(v,i){
				if (this.activemj == i) {
					return
				}
				this.activemj = i;
				this.updata.acreage=v
				
			},
			selhy(v,i){
				if (this.activehy == i) {
					return
				}
				this.activehy = i;
				this.updata.industry=v.id
				if(this.activehy>-1){
					this.updata.type=v.id
				}else{
					this.updata.type=''
				}
			},
			mjws(e){
				this.mjw=e.detail.value
				this.activemj=-1;
				this.updata.acreage='0-'+this.mjw*this.mjh
			},
			mjhs(e){
				this.mjh=e.detail.value
				this.activemj=-1;
				this.updata.acreage='0-'+this.mjw*this.mjh
			},
			getinfo(){
				this.http('/api/tender/index', 'post', this.updata, )
					.then((res) => {
						this.info = res.data.data
						console.log(this.info)
					})
			},
			tobiddingDetail(v){
				uni.navigateTo({
					url: '/pages/index/bidding/biddingDetail?id=' + v
				});
			},
		}
	}
</script>

<style lang="less">
	.bidding {
		.header {
			padding: 0 40rpx;

			.searchBox {
				.left {
					display: flex;
					align-items: center;
					flex: 1;
					padding: 0 30rpx;
					height: 80rpx;
					background: rgba(245, 245, 249, 1);
					border-radius: 40rpx;
					margin-right: 27rpx;
image{
				width: 34rpx;
				height: 34rpx;
			}
					input {
						padding-left: 8rpx;
						width: 100%;
					}
				}

				.right {
					display: flex;
					align-items: center;

					view {
						font-size: 32rpx;
						font-weight: 500;
						color: rgba(34, 145, 255, 1);
					}
				}
			}

			.type {
				margin-top: 50rpx;
				position: relative;
			
				.ts {
					display: flex;
					align-items: center;
					height: 40rpx;
			
					.xjt {
						width: 14px;
						height: 14px;
						margin-top: 5rpx;
					}
			
					.activeColor {
						color: #2291FF;
					}
				}
			}
		}

		.list {
			padding: 40rpx;

			.userInfo {
				display: flex;
				align-items: center;

				.userLogo {
					width: 90rpx;
					height: 90rpx;
					border-radius: 50%;
				}

				.right {
					display: flex;
					justify-content: space-between;
					flex-direction: column;
					align-items: flex-start;
					height: 90rpx;
					padding-left: 20rpx;
					flex: 1;

					.one {
						width: 100%;

						.name {
							font-size: 36rpx;
							font-weight: bold;
						}

						.addr {
							font-size: 24rpx;
							padding-left: 8rpx;
							color: #BEC9D7;
						}

						.lable {
							height: 40rpx;
							background: rgba(255, 241, 229, 1);
							border-radius: 20rpx 0px 20rpx 20rpx;
							padding: 0 15rpx;
							font-size: 24rpx;
							color: rgba(254, 114, 3, 1);
							line-height: 40rpx;
						}
					}

					.infos {
						display: flex;

						view {
							font-size: 24rpx;
							color: rgba(190, 201, 215, 1);
						}
					}
				}
			}

			.content {
				margin-top: 40rpx;
				display: flex;
				flex-wrap: wrap;

				.allWord {
					color: #2291FF;
					width: 60rpx;
				}
			}

			.imgs {
				display: grid;
				grid-template-columns: repeat(3, 210rpx);
				grid-column-gap: 20rpx;
				grid-row-gap: 20rpx;
				margin-top: 40rpx;

				image {
					width: 100%;
					height: 210rpx;
				}
			}

			.timeBox {
				margin-top: 40rpx;

				.time {
					font-weight: bold;
					color: rgba(254, 114, 3, 1);
				}

				button {
					width: 180rpx;
					height: 68rpx;
					line-height: 68rpx;
					background: rgba(34, 145, 255, 1) !important;
					border-radius: 34rpx;
					font-size: 32rpx;
					color: #fff;
					font-weight: bold;
				}
			}
		}
	}

	.selectPop {
		position: fixed;
		top: 190rpx;
		right: 0;
		width: 100%;
		height: calc(100vh - 190rpx);
		z-index: 999;
		background: rgba(0, 0, 0, .3);
	
		.pop {
			background-color: #fff;
			padding: 40rpx;
	
			.selectList {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				width: calc(100% + 20rpx);
	
				view {
					width: 150rpx;
					height: 70rpx;
					background: rgba(245, 245, 249, 1);
					border-radius: 10rpx;
					text-align: center;
					line-height: 70rpx;
					font-size: 26rpx;
					margin-right: 20rpx;
					margin-bottom: 20rpx;
				
				}
				.active {
					color: rgba(34, 145, 255, 1);
					background: rgba(238, 246, 255, 1);
				}
			}
	
			.getmeter {
				margin-top: 20rpx;
	
				input {
					height: 72rpx;
					line-height: 70rpx;
					border: 1rpx solid rgba(229, 229, 229, 1);
					border-radius: 10rpx;
					padding: 0 27rpx;
				}
	
				.and {
					margin: 0 20rpx;
				}
			}
	
			.clearBox {
				margin-top: 50rpx;
	
				.clear {
					width: 154rpx;
					height: 90rpx;
					text-align: center;
					line-height: 90rpx;
					background: rgba(245, 245, 249, 1);
					border-radius: 10rpx;
					font-size: 32rpx;
					color: #BEC9D7;
				}
	
				.sure {
					flex: 1;
					margin-left: 20rpx;
					background: rgba(34, 145, 255, 1);
					border-radius: 10rpx;
					height: 90rpx;
					line-height: 90rpx;
					font-size: 32rpx;
					color: #fff;
					text-align: center;
				}
			}
		}
	}
</style>
